<template>
  <ATable
    rowKey="__id__"
    :columns="tableColumns"
    :data-source="tableData"
    class="components-table-demo-nested"
  >
    <template #bodyCell="{ text, column, record, index }">
      <!-- 列 -->
      <template v-if="isCell(column.dataIndex as string)">
        <!-- 显示 -->
        <Col
          v-show="record.__state__ === 'edit'"
          :column="column"
          :text="text"
          :record="record"
        ></Col>
        <span v-show="record.__state__ !== 'edit'">{{ text }}</span>
        <!-- 编辑模式 -->
      </template>

      <!-- 操作栏 -->
      <template v-else>
        <el-button
          size="small"
          plain
          type="success"
          v-show="btnIsShow('save', record.__state__)"
          @click="handleSave({ text, column, record, index })"
        >
          保存
        </el-button>

        <ElButton
          size="small"
          type="primary"
          plain
          v-show="btnIsShow('edit', record.__state__)"
          @click="handleEdit({ text, column, record, index })"
        >
          修改
        </ElButton>

        <ElButton
          size="small"
          type="primary"
          plain
          v-show="btnIsShow('add', record.__state__)"
          @click="handleAdd({ text, column, record, index })"
        >
          添加
        </ElButton>

        <ElButton
          size="small"
          type="primary"
          plain
          v-show="btnIsShow('copy', record.__state__)"
          @click="handleCopy({ text, column, record, index })"
        >
          复制
        </ElButton>

        <ElButton
          size="small"
          type="danger"
          plain
          v-show="btnIsShow('remove', record.__state__)"
          @click="handleRemove({ text, column, record, index })"
        >
          删除
        </ElButton>

        <span v-show="btnIsShow('slot', record.__state__)">
          <slot
            name="operation"
            :record
            :columns
            :index
          ></slot>
        </span>
      </template>
    </template>

    <template #expandedRowRender="{ record, index, indent, expanded }">
      <slot
        name="expand"
        :record
        :index
        :indent
        :expanded
      ></slot>

      <slot
        name="footer"
        :record
        :index
        :indent
        :expanded
      ></slot>
    </template>
  </ATable>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  defineModel,
  unref,
  toRefs,
  withDefaults,
  reactive,
} from "vue";
import { Table as ATable } from "ant-design-vue";
import type { ColumnsType, ColumnType } from "ant-design-vue/es/table";
import type { Columns, WithTableSignal, HandleEvent } from "../XRow/types";
import { useTableRowState } from "./useTableRowState";

import Col from "../XRow/Col.vue";

const { btnIsShow } = useTableRowState({
  view: {
    edit: true,
    add: true,
    remove: true,
    slot: true,
    confirm: false,
    delete: false,
    copy: false,
    save: false,
  },
});

defineOptions({ name: "XTable" });

type Buttons = "edit" | "save" | "add" | "copy" | "remove";

// interface HandleEvent {
//   text: string | number;
//   column: Columns<any>;
//   record: WithTableSignal<{ send: boolean }>;
//   index: number;
// }

interface Props {
  data: WithTableSignal<object>[];
  // columns: Columns<any>;
  columns: ColumnsType<any>;
  defaultButtons?: Buttons[];
}

const $props = defineProps<Props>();

const $emit = defineEmits(["edit", "save", "add", "copy", "remove"]);

const tableData = computed(() => {
  return $props.data;
});
const tableColumns = computed(() => [...$props.columns, { title: "操作" }]);

// dataIndex数组：["name","age", ...]
const tableCells = computed(() => $props.columns.map((e) => e.dataIndex));
// 要显示列
const isCell = (dataIndex: string) => tableCells.value.includes(dataIndex);

const handleEdit = (event: HandleEvent) => {
  event.record.__state__ = "edit";
  $emit("edit", event);
};

const handleSave = (event: HandleEvent) => {
  event.record.__state__ = "view";
  $emit("save", event);
};

const handleAdd = (event: HandleEvent) => {
  $emit("add", event);
};
const handleCopy = (event: HandleEvent) => {
  $emit("copy", event);
};

const handleRemove = (event: HandleEvent) => {
  $emit("remove", event);
};
</script>
